<!DOCTYPE html>
<html lang=en>

<head>
  <meta charset=UTF-8>
  <meta name=viewport content="width=device-width,initial-scale=1">
  <meta http-equiv=X-UA-Compatible content="ie=edge">
  <title>Document</title>
  <link rel=stylesheet href=../tools/bootstrap-3.3.7-dist/css/bootstrap.min.css>
  <link rel=stylesheet href=../css/base.css>
  <link rel=stylesheet href=../css/login.css>
  <style>
    body {
      background-image: url(../message/背景图.png)
    }

    .jumbotron {
      width: 800px;
      margin: 50px auto;
      background: rgba(0, 0, 0, 0)
    }

    .jumbotron>h1 {
      width: 600px;
      margin: 50px auto;
      color: azure
    }

    .login {
      margin: 0 auto;
      font-size: 16px;
      color: azure
    }

    #sc {
      padding-left: 20px;
      color: azure
    }

    .inputWidth {
      width: 200px;
      display: inline-block
    }

    .spanspan {
      color: red;
      font-size: 20px
    }

    .cover {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .5)
    }
  </style>
</head>

<body>
  <div class=jumbotron>
    <h1>欢迎注册SHOP</h1>
    <div class=login>
      <div class=form-horizontal>
        <div class=form-group><label for=username class="col-sm-2 control-label">用户名</label>
          <div class=col-sm-10><input name=userName type=text class="form-control inputWidth" placeholder=用户名> <span
              name=nameSpan class=spanspan></span></div>
        </div>
        <div class=form-group><label for=password class="col-sm-2 control-label">密码</label>
          <div class=col-sm-10><input name=pwd1 type=password class="form-control inputWidth" placeholder=密码> <span
              class=spanspan></span></div>
        </div>
        <div class=form-group><label for=password class="col-sm-2 control-label">确认密码</label>
          <div class=col-sm-10><input name=pwd2 type=password class="form-control inputWidth" placeholder=确认密码> <span
              name=pwdSpan class=spanspan></span></div>
        </div>
        <div class=form-group><label for=password class="col-sm-2 control-label">验证码</label>
          <div class=col-sm-10><input name=vc type=text class="form-control inputWidth" id=ac placeholder=验证码> <a
              id=sc></a><br><span name=vcSpan class=spanspan></span></div>
        </div>
        <div class=form-group>
          <div class="col-sm-offset-2 col-sm-10"><button class="btn btn-default">注册</button></div>
        </div>
        <div name=box></div>
      </div>
    </div>
  </div>
  <script src=../js/jquery.min.js></script>
  <script src=../js/tools.js></script>
  <script>$('#sc').html(setVc()).click(function () { $('#sc').html(setVc()) });
    $('[name=userName]').blur(function () {
      let userName = $(this).val();
      const p = new Promise(function (f, r) {
        $.ajax({
          url: '../server/goods_select.php',
          type: 'post',
          data: { userName },
          dataType: 'json',
          success: f,
          error: r,
        })
      })
      p.then(res => {
        if (res.result === 1) {
          $('[name="nameSpan"]').html('<span style="color:blue">恭喜您，用户名可用</span>');
        } else if (res.result === 0) {
          $('[name="nameSpan"]').html('<span style="color:red">用户名重复，不可使用</span>');
        }
      })
    })
    $('button').click(function () {
      let name = $('[name="userName"]').val();
      let pwd1 = $('[name="pwd1"]').val();
      let pwd2 = $('[name="pwd2"]').val();
      let vc = $('[name="vc"]').val();

      let vcStr = $('#sc').html();

      if (pwd1 !== pwd2) {
        $('[name=pwdSpan]').html('<span style="color:red">两次密码不一致</span>');
        return;
      } else {
        $('[name=pwdSpan]').html(' ');
      }

      if (vc.toUpperCase() !== vcStr.toUpperCase()) {
        $('[name="vcSpan"]').html('<span style="color:red">验证码错误</span>');
        $('#sc').html(setVc());
      } else {
        $('[name="vcSpan"]').html('');
      }
      const p = new Promise(function (f, r) {
        $.ajax({
          url: '../server/goods_reg.php',
          type: 'post',
          data: { userName: name, userPwd: pwd1 },
          dataType: 'json',
          success: f,
          error: r,
        })
      })
      p.then(function (res) {
        // console.log(res);
        $('[name=box]').html('<span>恭喜注册成功，5秒后跳转<a href="./index.html">点击跳转首页面</a></span>');
        let num = 5;
        let time = setInterval(() => {
          num--;
          if (num === 0) {
            window.location.href = './login.html';
            return;
          }
          $('[name=box]').html(`<span>恭喜注册成功，${num}秒后跳转<a href="./index.html">点击跳转首页面</a></span>`);

        }, 1000)
      })
    })</script>
  <script></script>
</body>

</html>